<template>
  <div class="index-bottom-warp">
    <Row style="border-bottom: 1px solid #dcdee2;padding-bottom: 6px;">
      <i-col span="8">
        <Button type="text" @click="comName='MonitorList'">监控列表</Button>
        <Button type="text" @click="comName='ZlInfo'">指令信息</Button>
        <Button type="text" @click="comName='ImageInfo'">图片信息</Button>
        <Button type="text">服务器</Button>
      </i-col>
      <i-col span="15" class="setting-bar">
        <div v-if=" comName=='MonitorList' ">
          <Button type="primary">开始</Button>
          <Button type="primary">清除全部</Button>
        </div>
        <div v-else-if=" comName=='ImageInfo' ">
          <DatePicker
            type="datetimerange"
            placeholder="选择时间区间"
            style="width: 320px;margin-left:6px"
          ></DatePicker>
          <Select v-model="model1" style="width:150px;margin-left:6px">
            <Option value="1">前置摄像头</Option>
            <Option value="1">后置摄像头</Option>
          </Select>
          <Select v-model="model2" style="width:100px;margin-left:6px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
          <Button type="primary">查询</Button>
        </div>
        <div v-else>
          <Button type="text"></Button>
        </div>
      </i-col>
      <i-col span="1" style=" text-align: center;">
        <Button :icon="bigSize?'ios-arrow-down':'ios-arrow-up'" @click="emitToggleSize"></Button>
      </i-col>
    </Row>
    <div style="margin-top:10px;">
      <keep-alive>
        <component :is="comName"></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import MonitorList from "@/components/MonitorList.vue";
import ZlInfo from "@/components/zl-info";

export default {
  name: "IndexBottom",
  components: {
    MonitorList,
    ZlInfo,
    ImageInfo: () => import("@/components/image-info"),
  },
  props: {
    bigSize: { type: Boolean, default: false },
  },
  data() {
    return {
      value1: 0,
      comName: "MonitorList",
      cityList: [
        {
          value: "1",
          label: "平台下发",
        },
        {
          value: "2",
          label: "定时",
        },
        {
          value: "3",
          label: "正转",
        },
        {
          value: "4",
          label: "反转",
        },
        {
          value: "5",
          label: "点火触发",
        },
        {
          value: "6",
          label: "熄火触发",
        },
      ],
      model1: "",
      model2: "",
    };
  },
  methods: {
    emitToggleSize() {
      this.$emit("toggleSize");
    },
  },
};
</script>

<style  scoped>
.setting-bar button {
  margin-left: 5px;
}
.setting-bar {
  text-align: right;
}
.index-bottom-warp {
  height: 500px;
}
</style>>
